<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-pic"></i> 宠物门店管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 搜索栏 -->
    <div class="container">
      <div class="handle-box">
        <el-input v-model="searchForm.name" placeholder="诊所名称" class="handle-input mr10" clearable />
        <el-input v-model="searchForm.phone" placeholder="联系电话" class="handle-input mr10" clearable />
        <el-input v-model="searchForm.location" placeholder="位置" class="handle-input mr10" clearable />
        <el-input v-model="searchForm.userName" placeholder="用户名" class="handle-input mr10" clearable />
        <el-select v-model="searchForm.isOnline" placeholder="是否在线" class="handle-input mr10" clearable>
          <el-option label="在线" :value="1" />
          <el-option label="离线" :value="0" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="el-icon-lx-add" @click="showAddClinic">新增门店</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" border class="table" ref="clinicTable" header-cell-class-name="table-header">
        <el-table-column prop="id" label="门店ID" width="80" />
        <el-table-column prop="userId" label="用户ID" />
        <el-table-column prop="name" label="商家名称" />
        <el-table-column prop="logo" label="商家图标">
          <template #default="scope">
            <el-image v-if="scope.row.logo" :src="scope.row.logo" style="width:40px;height:40px;border-radius:4px;"
              fit="cover" :preview-src-list="[scope.row.logo]" />
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="location" label="商家位置">
          <template #default="scope">
            <span>{{ scope.row.location || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经纬度">
          <template #default="scope">
            <span v-if="scope.row.longitude && scope.row.latitude">
              {{ scope.row.longitude }}, {{ scope.row.latitude }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="supportedPets" label="支持类型">
          <template #default="scope">
            <span>{{ scope.row.supportedPets || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="businessHours" label="营业时间">
          <template #default="scope">
            <span>{{ scope.row.businessHours || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isHours" label="24小时营业">
          <template #default="scope">
            <el-tag :type="scope.row.isHours === 1 ? 'success' : 'info'" size="mini">
              {{ scope.row.isHours === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="transportType" label="急救出行方式">
          <template #default="scope">
            <span v-if="scope.row.transportType !== undefined && scope.row.transportType !== null">
              {{ scope.row.transportType === 0 ? '电动车' : '汽车' }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="预估价格">
          <template #default="scope">
            <span>{{ scope.row.price ? `¥${scope.row.price}` : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="responseTime" label="响应时间">
          <template #default="scope">
            <span>{{ scope.row.responseTime ? `${scope.row.responseTime}分钟` : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="serviceRadius" label="服务范围">
          <template #default="scope">
            <span>{{ scope.row.serviceRadius ? `${scope.row.serviceRadius}公里` : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isOnline" label="是否在线">
          <template #default="scope">
            <el-tag :type="scope.row.isOnline ? 'success' : 'danger'" size="mini">
              {{ scope.row.isOnline ? '在线' : '离线' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="scope">
            <el-button type="text" @click="showEditClinic(scope.row)">编辑</el-button>
            <el-button type="text" class="red" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
      </div>
    </div>

    <!-- 新建/编辑门店弹窗 -->
    <el-dialog v-model="addDialog.visible" :title="addDialog.isEdit ? '编辑门店' : '新增门店'" width="60%">
      <el-form :model="addDialog.form" label-width="120px" :rules="formRules" ref="clinicForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="绑定用户" prop="selectedUser" required>
              <div style="display: flex; align-items: center; gap: 10px;">
                <el-input v-model="userDisplayText" placeholder="请选择绑定用户" readonly style="flex: 1;" />
                <el-button @click="selectUser">选择用户</el-button>
                <el-button v-if="addDialog.form.selectedUser" type="danger" @click="clearUser">清除</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="诊所名称" prop="name" required>
              <el-input v-model="addDialog.form.name" placeholder="请输入诊所名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="addDialog.form.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="响应时间" prop="responseTime">
              <el-input v-model="addDialog.form.responseTime" placeholder="响应时间（分钟）" type="number" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预估价格" prop="price">
              <el-input v-model="addDialog.form.price" placeholder="预估价格" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务范围" prop="serviceRadius">
              <el-input v-model="addDialog.form.serviceRadius" placeholder="服务范围（公里）" type="number" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商家图标" prop="logo">
          <MediaUploader v-model="logoFileList" :limit="1" accept-type="image" />
          <div class="form-tip">建议上传正方形图片，支持 JPG、PNG 格式</div>
        </el-form-item>

        <el-form-item label="支持宠物类型" prop="supportedPets">
          <el-input v-model="addDialog.form.supportedPets" placeholder="支持的宠物类型，逗号分隔" />
          <div class="form-tip">例如：猫,狗,兔子,鸟类</div>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="24小时营业" prop="isHours">
              <el-radio-group v-model="addDialog.form.isHours">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否在线" prop="isOnline">
              <el-radio-group v-model="addDialog.form.isOnline">
                <el-radio :label="1">在线</el-radio>
                <el-radio :label="0">离线</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="营业时间" prop="businessHours" v-if="addDialog.form.isHours !== 1">
              <el-time-picker v-model="addDialog.form.businessHours" is-range range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择营业时间" style="width: 100%;" />
            </el-form-item>
            <el-form-item v-else label="营业时间">
              <span class="readonly-text">24小时营业</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="急救出行方式" prop="transportType">
              <el-radio-group v-model="addDialog.form.transportType">
                <el-radio :label="0">电动车 时速30KM/H</el-radio>
                <el-radio :label="1">汽车 时速60KM/H</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="门店地址" prop="location" required>
          <div style="display: flex; align-items: flex-start; gap: 10px;">
            <div style="flex: 1;">
              <div class="address-display">
                <span v-if="addDialog.form.location" class="address-text">{{ addDialog.form.location }}</span>
                <span v-else class="address-placeholder">请选择门店地址</span>
              </div>
              <div v-if="addDialog.form.longitude && addDialog.form.latitude" class="location-coordinates">
                经纬度：{{ addDialog.form.longitude }}, {{ addDialog.form.latitude }}
              </div>
            </div>
            <div style="display: flex; gap: 10px;">
              <el-button @click="selectLocation">选择地点</el-button>
              <el-button v-if="addDialog.form.location" type="danger" @click="clearLocation">清除</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="addDialog.isEdit ? saveEdit() : saveAdd()">保存</el-button>
      </template>
    </el-dialog>

    <!-- 选择用户弹窗 -->
    <SelectUser v-model="selectUserVisible" :multiple="false"
      :selected-user-ids="addDialog.form.selectedUser ? [addDialog.form.selectedUser.userId] : []"
      @confirm="handleSelectUser" />

    <!-- 选择地点弹窗 -->
    <GetMap v-model="selectLocationVisible" @confirm="handleSelectLocation" />
  </div>
</template>

<script>
import moment from "moment";
import SelectUser from "@/components/selectUser.vue";
import GetMap from "@/components/getMap.vue";
import MediaUploader from "@/components/mediaUploader.vue";
import { getPetClinics, addPetClinic, deletePetClinic, updatePetClinic } from "@/api/store";

export default {
  name: "PetClinicManagement",
  components: {
    SelectUser,
    GetMap,
    MediaUploader
  },
  data() {
    return {
      searchForm: {
        name: "",
        phone: "",
        location: "",
        userName: "",
        isOnline: "",
      },
      tableData: [],
      // 分页相关
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },

      addDialog: {
        visible: false,
        isEdit: false, // 是否为编辑模式
        editId: null, // 编辑的门店ID
        form: {
          selectedUser: null, // 选中的用户
          name: "", // 诊所名称
          phone: "", // 电话
          responseTime: "", // 响应时间（分钟）
          price: "", // 预估价格
          serviceRadius: "", // 服务范围（公里）
          supportedPets: "", // 支持宠物类型
          isHours: 0, // 是否24小时营业
          isOnline: 1, // 是否在线
          businessHours: null, // 营业时间
          transportType: 0, // 急救出行方式
          logo: "", // 商家图标
          location: "", // 中文地址
          longitude: "", // 经度
          latitude: "", // 纬度
        },
      },
      // 用户选择弹窗
      selectUserVisible: false,
      // 地点选择弹窗
      selectLocationVisible: false,
      // 商家图标文件列表
      logoFileList: [],
      // 表单验证规则
      formRules: {
        name: [
          { required: true, message: '请输入诊所名称', trigger: 'blur' }
        ],
        selectedUser: [
          {
            validator: (_, value, callback) => {
              if (!value || !value.userId) {
                callback(new Error('请选择绑定用户'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ],
        location: [
          { required: true, message: '请选择门店地址', trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    userDisplayText() {
      return this.addDialog.form.selectedUser ?
        `${this.addDialog.form.selectedUser.nickname} (${this.addDialog.form.selectedUser.userId})` :
        '';
    }
  },
  watch: {
    logoFileList: {
      deep: true,
      handler(newVal) {
        // 当图标文件列表变化时，更新表单中的logo字段
        if (newVal && newVal.length > 0) {
          this.addDialog.form.logo = newVal[0].url;
        } else {
          this.addDialog.form.logo = '';
        }
      }
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    dateFormat(val) {
      return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : "";
    },
    handleSearch() {
      // 搜索时重置到第一页
      this.pagination.currentPage = 1;
      this.getData();
    },
    // 分页相关方法
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.getData();
    },
    buildSearchParams() {
      const params = {
        // 必须的分页参数
        limit: this.pagination.pageSize,
        offset: this.pagination.currentPage,
        isDel: 0
      };

      // 根据搜索表单构建查询参数
      if (this.searchForm.name) {
        params.name = this.searchForm.name;
      }
      if (this.searchForm.phone) {
        params.phone = this.searchForm.phone;
      }
      if (this.searchForm.location) {
        params.location = this.searchForm.location;
      }
      if (this.searchForm.userName) {
        params.userName = this.searchForm.userName;
      }
      if (this.searchForm.isOnline !== "") {
        params.isOnline = this.searchForm.isOnline;
      }

      return params;
    },
    async getData() {
      try {
        const params = this.buildSearchParams();
        const response = await getPetClinics(params);

        if (response && response.data) {
          // 将API返回的数据映射到表格需要的格式
          this.tableData = (response.data.rows || response.data.records).map(item => {
            // // 解析经纬度
            // let longitude = '', latitude = '';
            // if (item.geoLocation) {
            //   const coords = item.geoLocation.split(',');
            //   longitude = coords[0] || '';
            //   latitude = coords[1] || '';
            // }

            return {
              id: item.id,
              userId: item.userId || '-',
              name: item.name || '-',
              logo: item.logo || item.icon || '',
              location: item.location || '-',
              longitude: item.longitude,
              latitude: item.latitude,
              businessHours: item.businessHours || '-',
              isHours: item.isHours ? 1 : 0,
              isDel: item.isDel ? 1 : 0,
              isOnline: item.isOnline ? 1 : 0,
              supportedPets: item.supportedPets || '-',
              transportType: parseInt(item.transportType),
              price: item.price || '-',
              responseTime: item.responseTime || '-',
              serviceRadius: item.serviceRadius || '-',
              // 保留原始数据用于编辑
              _original: item
            };
          });

          // 更新总数（如果接口返回了总数）
          if (response.data.total !== undefined) {
            this.pagination.total = response.data.total;
          }
        }
      } catch (error) {
        console.error('获取宠物门店数据失败:', error);
        this.$message.error('获取宠物门店数据失败');
      }
    },
    showAddClinic() {
      this.addDialog.visible = true;
      this.addDialog.isEdit = false;
      this.addDialog.editId = null;
      this.addDialog.form = {
        selectedUser: null,
        name: "",
        phone: "",
        responseTime: "",
        price: "",
        serviceRadius: "",
        supportedPets: "",
        isHours: 0,
        isOnline: 1,
        businessHours: null,
        transportType: 0,
        logo: "",
        location: "",
        longitude: "",
        latitude: "",
      };
      // 清空图标文件列表
      this.logoFileList = [];
    },
    showEditClinic(row) {
      this.addDialog.isEdit = true;
      this.addDialog.editId = row.id;

      const original = row._original;

      // // 解析经纬度
      // let longitude = '', latitude = '';
      // if (original.geoLocation) {
      //   const coords = original.geoLocation.split(',');
      //   longitude = coords[0] || '';
      //   latitude = coords[1] || '';
      // }

      // 解析营业时间
      let businessHours = null;
      if (original.businessHours && original.businessHours !== '24小时营业' && original.isHours !== 1) {
        const timeRange = original.businessHours.split('-');
        if (timeRange.length === 2) {
          businessHours = [
            this.parseTime(timeRange[0]),
            this.parseTime(timeRange[1])
          ];
        }
      }

      // 填充编辑数据
      this.addDialog.form = {
        selectedUser: original.userId ? {
          userId: original.userId,
          nickname: original.userName || '未知用户'
        } : null,
        name: original.name || "",
        phone: original.phone || "",
        responseTime: original.responseTime || "",
        price: original.price || "",
        serviceRadius: original.serviceRadius || "",
        supportedPets: original.supportedPets || "",
        isHours: row.isHours,
        isOnline: row.isOnline,
        businessHours: businessHours,
        transportType: row.transportType,
        logo: original.logo || original.icon || "",
        location: original.location || "",
        longitude: original.longitude,
        latitude: original.latitude,
      };

      // 设置图标文件列表
      this.logoFileList = [];
      if (this.addDialog.form.logo) {
        this.logoFileList = [{
          url: this.addDialog.form.logo,
          type: 'image/jpeg',
          name: 'logo.jpg'
        }];
      }

      this.addDialog.visible = true;
    },
    async saveEdit() {
      try {
        // 验证表单
        await this.$refs.clinicForm.validate();

        // 验证必填项
        if (!this.addDialog.form.selectedUser) {
          this.$message.error('请选择绑定用户');
          return;
        }
        if (!this.addDialog.form.location) {
          this.$message.error('请选择门店地址');
          return;
        }
        if (!this.addDialog.form.longitude || !this.addDialog.form.latitude) {
          this.$message.error('请选择有效的门店地址（包含经纬度信息）');
          return;
        }

        // 构建编辑参数
        const params = this.buildSaveParams();
        params.id = this.addDialog.editId;

        await updatePetClinic(params);

        this.$message.success('编辑门店成功');
        this.addDialog.visible = false;
        this.getData();
      } catch (error) {
        console.error('编辑门店失败:', error);
        this.$message.error('编辑门店失败');
      }
    },

    handleDelete(row) {
      this.$confirm("确定要删除该门店吗？", "提示", { type: "warning" }).then(async () => {
        try {
          // 构建删除参数
          const delDTO = {
            id: row.id
          };

          await deletePetClinic(delDTO);

          this.$message.success('删除门店成功');
          this.getData();
        } catch (error) {
          console.error('删除门店失败:', error);
          this.$message.error('删除门店失败');
        }
      }).catch(() => {
        // 用户取消删除
      });
    },
    async saveAdd() {
      try {
        // 验证表单
        await this.$refs.clinicForm.validate();

        // 验证必填项
        if (!this.addDialog.form.selectedUser) {
          this.$message.error('请选择绑定用户');
          return;
        }
        if (!this.addDialog.form.location) {
          this.$message.error('请选择门店地址');
          return;
        }
        if (!this.addDialog.form.longitude || !this.addDialog.form.latitude) {
          this.$message.error('请选择有效的门店地址（包含经纬度信息）');
          return;
        }

        // 构建新增参数
        const params = this.buildSaveParams();

        await addPetClinic(params);

        this.$message.success('新增门店成功');
        this.addDialog.visible = false;
        this.getData();
      } catch (error) {
        console.error('新增门店失败:', error);
        this.$message.error('新增门店失败');
      }
    },
    buildSaveParams() {
      const form = this.addDialog.form;

      // 处理营业时间
      let businessHours = "";
      if (form.isHours === 1) {
        businessHours = "24小时营业";
      } else if (form.businessHours && Array.isArray(form.businessHours)) {
        businessHours = `${this.formatTime(form.businessHours[0])}-${this.formatTime(form.businessHours[1])}`;
      }

      return {
        userId: form.selectedUser?.userId || "",
        userName: form.selectedUser?.nickname || "",
        name: form.name || "",
        phone: form.phone || "",
        responseTime: parseInt(form.responseTime) || 0,
        price: parseFloat(form.price) || 0,
        serviceRadius: parseInt(form.serviceRadius) || 0,
        supportedPets: form.supportedPets.trim().replace("、", ",").replace("，", ",") || "",
        isHours: form.isHours,
        isOnline: form.isOnline,
        businessHours: businessHours,
        transportType: form.transportType,
        logo: form.logo || "",
        location: form.location || "",
        longitude: parseFloat(form.longitude) || 0,
        latitude: parseFloat(form.latitude) || 0,
        // geoLocation: `${form.longitude},${form.latitude}`,
        // distance: parseFloat(form.serviceRadius) || 0,
        // offset: parseInt(form.price) || 0,
        // sortOrder: 0,
        // limit: 10,
        // createTime: this.dateFormat(new Date()),
        // updateTime: this.dateFormat(new Date())
      };
    },
    selectUser() {
      this.selectUserVisible = true;
    },

    clearUser() {
      this.addDialog.form.selectedUser = null;
      // 触发表单验证
      this.$nextTick(() => {
        this.$refs.clinicForm?.validateField('selectedUser');
      });
    },

    handleSelectUser(selectedUsers) {
      if (selectedUsers && selectedUsers.length > 0) {
        this.addDialog.form.selectedUser = selectedUsers[0];
        // 触发表单验证
        this.$nextTick(() => {
          this.$refs.clinicForm?.validateField('selectedUser');
        });
      }
    },

    selectLocation() {
      this.selectLocationVisible = true;
    },

    handleSelectLocation(selectedLocation) {
      if (selectedLocation) {
        this.addDialog.form.location = selectedLocation.address || '';
        this.addDialog.form.longitude = selectedLocation.lng || '';
        this.addDialog.form.latitude = selectedLocation.lat || '';

        // 触发表单验证
        this.$nextTick(() => {
          this.$refs.clinicForm?.validateField('location');
        });
      }
    },

    clearLocation() {
      this.addDialog.form.location = '';
      this.addDialog.form.longitude = '';
      this.addDialog.form.latitude = '';

      // 触发表单验证
      this.$nextTick(() => {
        this.$refs.clinicForm?.validateField('location');
      });
    },



    // 格式化时间
    formatTime(time) {
      if (!time) return '';
      const date = new Date(time);
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },

    // 解析时间字符串为Date对象
    parseTime(timeStr) {
      if (!timeStr) return null;
      const [hours, minutes] = timeStr.split(':');
      const date = new Date();
      date.setHours(parseInt(hours), parseInt(minutes), 0, 0);
      return date;
    },

  },
};
</script>

<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
<style lang='scss' scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.green {
  color: #0ab618;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  height: 60px;
  width: 60px;
}

.crop-demo {
  display: flex;
  align-items: flex-end;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 148px;
  height: 148px;

  .pre-img {
    width: 146px;
    height: 146px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
    object-fit: cover;
  }

  .crop-input {
    position: absolute;
    width: 148px;
    height: 148px;
    left: 0px;
    top: 0px;
    opacity: 0;
    cursor: pointer;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
}

.picPreview {
  width: 100%;
}

.mb10 {
  margin-bottom: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.content-cell {
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 20px;
}

.form-tip {
  color: #909399;
  font-size: 12px;
  margin-left: 10px;
}

.location-info {
  margin-top: 8px;
}

.location-coordinates {
  color: #606266;
  font-size: 12px;
  background-color: #f5f7fa;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

::v-deep .el-date-editor {
  margin-right: 10px;
  width: 300px;
}

.selected-topics {
  margin-top: 8px;
}

.topic-tag {
  margin-right: 8px;
  margin-bottom: 4px;
}

.address-display {
  min-height: 32px;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.address-text {
  color: #606266;
  font-size: 14px;
}

.address-placeholder {
  color: #c0c4cc;
  font-size: 14px;
}

.readonly-text {
  color: #606266;
  font-size: 14px;
  line-height: 32px;
}
</style>
